<template>
    <div class="album albumvideo">
        <div>
            <div class="pic_img">
                <div class="pic_img_box">
                    <el-upload
                        list-type="picture"
                        class="avatar-uploader"
                        :action="uploadAction"
                        :data="uploadData"
                        :on-progress="uploadVideoProcess"
                        :on-success="handleVideoSuccess"
                        :before-upload="beforeUploadVideo"
                        :on-error="handleError"
                        :show-file-list="false"
                    >
                        <video
                            v-if="videoPath != '' && !videoFlag"
                            :src="videoPath"
                            class="avatar video-avatar"
                            controls="controls"
                            style="width:160px;height:120px"
                        >
                            您的浏览器不支持视频播放
                        </video>
                        <el-progress
                            v-if="videoFlag == true"
                            type="circle"
                            :percentage="videoUploadPercent"
                            style="margin-top:7px;"
                        />
                        <el-button v-else-if="videoPath == '' && !videoFlag" size="small" type="primary">
                            点击上传
                        </el-button>
                    </el-upload>
                </div>
            </div>
        </div>
        <p class="Upload_pictures">
            <span class="video-tip">{{ tip }}</span>
        </p>
    </div>
</template>

<script>
export default {
    name: 'UploadVideo',
    props: {
        tip: {
            type: String,
            default: '最多可以上传1个视频，建议大小50M，推荐格式mp4'
        },
        showVideoPath: {
            type: String,
            default: ''
        },
        value: {
            type: String,
            default: ''
        },
        disable: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            videoPath: '',
            isDisable: false,
            uploadAction: this.global.UploadVideo,
            videoFlag: false,
            //是否显示进度条
            videoUploadPercent: '',
            //进度条的进度，
            isShowUploadVideo: false,
            //显示上传按钮
            // videoForm: {
            //   showVideoPath:
            //     "https://vdo.zhen.com/adapter/product/2018-05-21_15-15-58_770.mp4"
            // },
            // 上传参数视频上传额外参数
            uploadData: {}
        }
    },
    watch: {
        value: function() {
            console.log('video this.value', this.value)
            this.videoPath = this.value
        },
        disable: function() {
            this.isDisable = this.disable
        }
    },
    mounted() {
        this.VideoPath = this.value
    },
    methods: {
        //上传前回调
        beforeUploadVideo(file) {
            var fileSize = file.size / 1024 / 1024 < 50
            if (
                ['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(
                    file.type
                ) == -1
            ) {
                this.$message({
                    message: '请上传正确的视频格式',
                    type: 'error'
                })
                //  layer.msg("请上传正确的视频格式");
                return false
            }
            if (!fileSize) {
                this.$message({
                    message: '视频大小不能超过50MB',
                    type: 'error'
                })
                return false
            }
            this.isShowUploadVideo = false
        },
        //进度条
        uploadVideoProcess(event, file, fileList) {
            this.videoFlag = true
            this.videoUploadPercent = file.percentage.toFixed(0) * 1
        },
        //上传成功回调
        handleVideoSuccess(res, file) {
            this.isShowUploadVideo = true
            this.videoFlag = false
            this.videoUploadPercent = 0

            //前台上传地址
            //if (file.status == 'success' ) {
            //    this.videoForm.showVideoPath = file.url;
            //} else {
            //     layer.msg("上传失败，请重新上传");
            //}

            //后台上传地址
            if (res.Code == 0) {
                this.videoForm.showVideoPath = res.Data
            } else {
                this.$message({
                    message: res.message,
                    type: 'error'
                })
            }
        },
        // 上传失败
        handleError(err, file, fileList) {
            console.log(err)
        }
    }
}
</script>
<style lang="scss" scoped>
.video-tip {
    font-size: 12px;
    line-height: 20px !important;
    display: block;
}
</style>
